<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* scoped的原理：
        只要我们在当前组件style中加了scoped，vue脚手架就会帮我们把template中每个标签加一个唯一的hash值作为属性
        接下来还会帮我们把所有的样式选择器变成交集选择器，和这个唯一的hash值属性作为交集 
        从而保证当前组件中写的样式只会对当前组件有效果的 */
      /* 如果页面上有二个元素 类名冲突了如何保证样式不会冲突 可以给里面的元素加一个唯一的值作为属性 */
      /* 十六进制的 1-9abcdef */
      /* 匹配是既有一个类名叫ceshi又有一个属性叫v123 
      属性选择器是中括号 */
      .ceshi[v221972675275796] {
        color: red;
      }
    </style>
  </head>
  <body>
    <button class="ceshi" v221972675275796>按钮</button>
    <button class="ceshi">按钮</button>
  </body>
</html>
